<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <el-tag effect="dark"><i class="el-icon-s-custom"></i>{{userName}}</el-tag>
          <el-tag effect="dark"><i class="el-icon-s-platform"></i>企业考勤管理系统</el-tag>
          <el-button type="primary" size="mini" round @click="backIndex">系统首页</el-button>
        </el-col>
        <el-col :span="8">
          &nbsp;
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" size="mini" round @click="openPwd">修改密码</el-button>
          <el-button type="primary" size="mini" round @click="backLogin">退出系统</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- router 开启路由地址配置-->
        <el-menu :default-openeds="['0','1']" text-color="white" background-color="#333333" router>
          <!-- 一级菜单-->
          <!-- index 菜单索引-->
          <template v-for="x in node ">
            <el-submenu :index="x.index">
              <template slot="title">
                <i :class="x.icon"></i>
                <span>{{x.name}}</span>
              </template>
              <!-- 二级菜单-->
              <template v-if="x.children!=null">
                <template v-for="y in x.children">
                  <!-- index 路由地址-->
                  <el-menu-item :index="y.url">
                    <template>
                      <i :class="y.icon"></i>
                      {{y.name}}
                    </template>
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 对话框 -->
        <el-dialog title="修改密码" width="50%" :visible.sync="pwdDialog">
          <el-form :model="userInfo" label-width="80px">

            <el-form-item label="邮箱">
              <el-col :span="20">
                <el-input v-model="userInfo.email"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="验证码">
              <el-col :span="20">
                <el-input v-model="userInfo.code"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="success" size="mini" @click="changePwd">修改密码</el-button>
              <el-button type="success" size="mini" @click="sendEmail" :disabled="isDisabled">发送验证码{{num}}</el-button>
            </el-form-item>

          </el-form>
        </el-dialog>

        <el-dialog title="修改密码" width="50%" :visible.sync="changePwdDialog">
          <el-form :model="userInfo" label-width="140px">

            <el-form-item label="请输入新密码">
              <el-col :span="20">
                <el-input v-model="userInfo.userPwd"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="请重复确认新密码">
              <el-col :span="20">
                <el-input v-model="userInfo.password"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="success" size="mini" @click="savePwd">确认</el-button>
              <el-button type="success" size="mini" @click="resetPwd">重置</el-button>
            </el-form-item>

          </el-form>
        </el-dialog>

        <!-- 路由视图-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        userName: "", //登录用户名
        pwdDialog: false, //控制密码弹框是否显示
        changePwdDialog: false, //控制修改密码弹窗是否显示
        userInfo: {
          userId:0,
          userNum: "",
          userName: "",
          userPwd: "",
          password: "",
          sex: "",
          phone: "",
          email: "",
          departmentId: 0,
          departmentName: "",
          salt: "",
          roleId: 0,
          roles: "",
          code:""
        },
        isDisabled: false, //控制发送验证码
        num: "", //倒计时
        node: [{
            name: "个人管理",
            index: '1',
            icon: "el-icon-star-off",
            children: [{
                name: "考勤信息",
                icon: "el-icon-star-off",
                url: "/index/question"
              },
              {
                name: "差假申请",
                icon: "el-icon-star-off",
                url: "/index/sexam"
              },
            ]
          },
          {
            name: "日常事务管理",
            index: '2',
            icon: "el-icon-star-off",
            children: [{
                name: "审批管理",
                icon: "el-icon-star-off",
                url: "/index/approval"
              },
              {
                name: "员工管理",
                icon: "el-icon-star-off",
                url: "/index/paperAdd"
              },
              {
                name: "部门管理",
                icon: "el-icon-star-off",
                url: "/index/department"
              },
              {
                name: "考勤时间管理",
                icon: "el-icon-star-off",
                url: "/index/timeManage"
              },
            ]
          },
        ]
      }
    },
    methods: {
      backIndex() {
        this.$router.push("/index/shouye");
      },
      backLogin() {
        //清空个人信息
        localStorage.clear();
        //回到登录页面
        this.$router.push("/");
        //刷新
        this.$router.go(0);
      },
      //打开密码框
      openPwd() {
        this.pwdDialog = true;
      },
      //发送邮件
      sendEmail() {
        //把vue对象赋值给变量
        var self = this;
        this.$http.post("/email/send", this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              self.isDisabled = true;
              self.num = 30;
              //倒计时
              var i = setInterval(function() {
                self.num--;
                if (self.num == 0) {
                  //启用发送按钮
                  self.num = "";
                  self.isDisabled = false
                  //清除计时器
                  clearInterval(i);
                }
              }, 1000)
            }
          })
      },
      changePwd() {
        //打开修改密码框
        var self = this;
        this.$http.post("/email/change", this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              //关闭密码框
              self.pwdDialog = false;
              self.changePwdDialog = true;
            }
          })

      },
      resetPwd() {
        //重置密码
        this.userInfo.userPwd = "";
        this.userInfo.password = "";
      },
      savePwd() { //保存密码
        if (this.userInfo.password != this.userInfo.userPwd) {
          this.$message("两次密码输入不一致！请重新输入");
          return;
        }
        var self = this;
        // self.userInfo.code=""
        this.$http.post("/email/save", this.$qs.stringify(this.userInfo))
          .then(function(rs) {
            self.$message(rs.data.info);
            if (rs.data.success) {
              //关闭密码框
              self.changePwdDialog = false;
            }
          })
          .catch(function(rs) {
            this.$message("服务器连接错误！");
          })
      },
      loadPower() {
        var self = this;
        this.$http.get(
          "/power/queryByName", {
            params: {
              "userName": this.userName
            }
          }).then(function(rs) {
          self.$message(rs.data.info);
          if (rs.data.success) {
            self.node = rs.data.data;
          }
        })
      }
    },
    mounted() {
      //1 获取存入sessionStorage的字符串
      this.userName = sessionStorage.getItem("name");
      //2 获取存入sessionStorage的对象
      var user = sessionStorage.getItem("user");
      //把字符串转化成对象
      var u = JSON.parse(user);
      console.log(u);
      console.log("用户名" + u.userName + "密码：" + u.userPwd);
      console.log("userId:" + u.userId);
      this.userInfo=u;
      //运行加载权限
      this.loadPower();
    }
  }
</script>

<style>
  html,
  body {
    height: 100%;
    margin: 0px;
  }

  .el-container {
    height: 100%;
  }


  .el-header {
    background-color: #444444;
    color: white;
    padding-top: 15px;

  }

  .el-aside {
    background-color: #333333;
    color: white;
    height: 100%;
  }

  .el-main {
    background-color: white;
    color: #333;
  }
</style>
